<template>
  <div class="index">
    <div class="top-bar flex-al-center flex_bet">
      <img src="@/assets/logo1.png" alt="">
      <div class="login-out" @click="logOut">退出登录</div>

    </div>
    <div class="content flex-col flex_center">
      <div class="title">欢迎来到，港区自然资源禀赋能源化评估软件</div>
      <div class="box flex flex-wrap flex_nav">
        <div class="li pointer flex-al-center" v-for="(item, index) in list" :key="index" @click="goDetails(index)">
          <img :src="item.url" alt="">
          <span>{{ item.name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          url: require("@/assets/li1.png"),
          name: "港区百科",
        }, {
          url: require("@/assets/li2.png"),
          name: "自然资源分布图",
        }, {
          url: require("@/assets/li3.png"),
          name: "港区自然资源禀赋特征",
        }, {
          url: require("@/assets/li4.png"),
          name: "港区自然资源能源化评估",
        }, {
          url: require("@/assets/li5.png"),
          name: "港区自然资源能源化组合策略评估",
        }, {
          url: require("@/assets/li6.png"),
          name: "自然资源禀赋能源化适应性参数查询",
        },
      ]
    }
  },
  created() {
  },
  methods: {
    logOut() {
      this.$store.commit("loginOut")
    },
    goDetails(index) {
      switch (index) {
        case 0:
          this.$router.push("/home/wiki")
          break;
        case 1:
          this.$router.push("/home/siteSelect")
          break;
        case 2:
          this.$router.push("/home/naturalResQuery")
          break;
        case 3:
          this.$router.push("/home/naturalResEstimate")
          break;
        case 4:
          this.$router.push("/home/strategyEstimate")
          break;
        case 5:
          this.$router.push("/home/classifyQuery")
          break;
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.index {
  width: 100%;
  height: 100vh;
  background: url(@/assets/big-bg.png) no-repeat;
  background-size: cover;
  background-color: #000C38;

  .top-bar {
    background: #2D57D2;
    padding: 20px;
    opacity: 1;
  }

  .content {
    .title {
      margin: 128px 0 106px;
      font-size: 43px;
      font-weight: 500;
      color: #E9EBF1;
    }

    .box {
      width: 1360px;

      .li {
        background: url(@/assets/box-bg.png) no-repeat;
        background-size: cover;
        padding-right: 50px;
        margin: 0 0 80px 0;

        img {
          width: 54px;
          margin: 60px 21px 60px 48px;
        }

        span {
          display: inline-block;
          width: 216px;
          font-size: 27px;
          font-weight: 400;
          color: #E9EBF1;
        }
      }
    }
  }
}

.login-out {
  margin: 0 40px 0 0;
  justify-content: center;
  font-size: 24px;
  padding: 8px;
  border-radius: 8px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 400;
  background-image: linear-gradient(#6182e5, #222222a4);
  cursor: pointer;
  text-align: center;
}
</style>